<template>
    <div>
        <h1>计算属性与监视</h1>
        <fieldset>
            <legend>姓名操作</legend>
            <label for="firstName">
                姓氏：<input type="text" id="firstName" placeholder="请输入姓氏" v-model="user.firstName">
            </label>
            <br>
                名字：<input type="text" placeholder="请输入名字" v-model="user.lastName">
        </fieldset>
        <fieldset>
            <legend>计算属性和监视的演示</legend>
            名字：<input type="text" placeholder="请输入名字" v-model="fullName1">
            <br>
            名字：<input type="text" placeholder="请输入名字" v-model="fullName2">
            <br>
            名字：<input type="text" placeholder="请输入名字" v-model="fullName3">
        </fieldset>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref, watch, watchEffect } from 'vue'

export default defineComponent({
    
    setup() {
        // !  定义一个响应式的对象
        const user = reactive({
            firstName :"李",
            lastName :"子建"
        });

        // todo 通过计算属性的方式、实现第一个姓名的显示
        //*  vue3的计算属性 新的回调函数computed  如果只是传入一个回调函数 则表示get函数  返回值是一个ref类型对象
        //*  传入的为一个对象
        // ? 第一个回显
        const fullName1 = computed(()=>{
            return user.firstName + "_" + user.lastName;
        })
        

        //? 第二个回显
        const fullName2 = computed({
            get():string{
                return user.firstName + "_" + user.lastName;
            },
            set(val): void{
                const [first,last] = (val as string).split("_");
                user.firstName = first;
                user.lastName = last;
            }
        })

        //? 第三个回显 监视 
        // todo watch函数 可以传2~3个参数  第一个参数是想要监视的东西 
        //todo 第二个参数是一个回调函数 回调函数有一个参数 就是当前的监视对象的新值
        // todo 第三个传递一个对象 immediate给他一个true  表示默认的执行一次1  deep weitrue表示深度监视
        const fullName3 = ref("");
        // watch(user,({firstName,lastName})=>{
        //     fullName3.value = firstName+"_"+lastName;
        // },{immediate:true,deep:true})

        //? watch可以监视多个数据
        // watch([user.firstName,user.lastName,fullName3],()=>{
            watch([()=>user.firstName,()=>user.lastName],()=>{
            //! 这里的代码没有执行，fullname3添加上后执行了 因为fullname3是响应式的数据  user.firstName不是
            //! 当我们想要监视非响应式的数据时要使用箭头函数
            console.log("=========");
        })

        // ! 使用 watchEffect默认就会立即执行一次
        watchEffect(()=>{
            fullName3.value = user.firstName + "_" + user.lastName;
        })
        return{
            user,
            fullName1,
            fullName2,
            fullName3
        }
    },
    // watch:{
    //     jian:{
    //         handler(){

    //         },
    //         immediate: true,
    //         deep:true
    //     }
    // }
})

</script>
